<template>
	<div class="topest">
		<hb-title-levels :list="list" />
		<div class="property-input">
			<div class="input-content">
				<ul class="input-content-item  ul-table">
					<li class="form-grop-bz bz li-table">
						<label for="lable" class="type">币种</label>

						<!-- <select @click="e_select_"
                            v-model="selected"
                            class="select-input">
                            <option v-for='(item,index) in items'
                                :key="index"
                                v-bind:value="item.value"
                                v-text="item.text">}</option>
                        </select> -->
						<!-- <hb-select :title="nowCoin" class="select-input c-coin" :list="coinSelects" @select="e_selectCoin" /> -->
						<select v-model="selected">
							<option v-for='(item,index) in coinSelects' :key="index" v-bind:value="item.value" v-text="item.txt"></option>
						</select>
					</li>
					<li class="from-grop-tb bz li-table">
						<label for="lable" class="type">提币地址</label>
						<input type="text" v-model="ipt_address">
					</li>

					<li class="from-grop-text bz li-table">
						<label for="lable" class="type">备注</label>
						<input type="text" v-model="ipt_beizhu">
					</li>

					<li class="from-grop-text bz li-table">
						<label for="lable" class="type">交易密码</label>
						<input type="password" v-model="transpwd">
					</li>

					<div class="btn">
						<hb-button txt="添加" @clk="e_add" id="s-b" />
					</div>
				</ul>
			</div>
		</div>
		<div class="adress-list">
			<span>地址列表</span>
		</div>
		<table class="adress-list-item">
			<tr>
				<td>币种</td>
				<td>提币地址</td>
				<td>备注</td>
				<!-- <td>操作</td> -->
			</tr>
			<tr class="t-white" v-for="(v) in addressList" :key="v.address">
				<td v-text="v.fname" />
				<td v-text="v.fAdderess" />
				<td v-text="v.fremark" />
				<!-- <td></td> -->
			</tr>
		</table>
		<hb-dialog v-if="showMsg" @clk="msgBack = ''">
			<h3 class="msg" v-text="msgBack" />

		</hb-dialog>
	</div>
</template>

<script>
import {vpost, vlink} from '@api'
export default {
	data() {
		return {
			list: [{txt: '资产中心', path: 'property'}, {txt: '提币地址管理', path: 'address'}],
			coinSelects: [],
			nowCoin: 'usdt',
			items: [{text: 'A', value: 'a'}, {text: 'B', value: 'b'}, {text: 'C', value: 'c'}],
			addressList: [],
			msgBack: '',
			selected: '', //币种
			ipt_address: '', //地址
			ipt_beizhu: '', //备注
			transpwd: '', //交易密码
		}
	},
	computed: {
		showMsg() {
			return this.msgBack !== ''
		},
	},
	methods: {
		e_select_() {
			//获取取到的值
			console.log(this.selected)
		},
		e_selectCoin(i, v) {
			this.nowCoin = v
		},

		// ============================================================获取币种👇========================================================//
		e_getCurrency() {
			vpost(vlink.addressManage.getCurrency, {}).then(re => {
				if (re.status == 1) {
					this.coinSelects = re.data.fvirtualcointype
				}
			})
		},
		// ============================================================获取币种👆========================================================//
		// ============================================================添加提币地址👇====================================================//
		// 添加钱的检查
		addCheck(cb) {
			let addData = {
				symbol: this.selected,
				withdrawAddr: this.ipt_address,
				withdrawRemark: this.ipt_beizhu,
				withdrawBtcPass: this.transpwd,
			}
			if (addData.symbol == '') {
				this.msgBack = '请选择币种'
				return
			}
			if (addData.withdrawAddr == '') {
				this.msgBack = '请填写提币地址'
				return
			}
			if (addData.withdrawRemark == '') {
				this.msgBack = '请填写备注'
				return
			}
			if (addData.withdrawBtcPass == '') {
				this.msgBack = '请填写交易密码'
				return
			}
			cb(addData)
		},
		// 执行提交
		e_add() {
			this.addCheck(addData => {
				vpost(vlink.addressManage.addAddress, addData).then(re => {
					if (re.status == 1) {
						this.getAddressInfo()
						this.msgBack = '添加成功'
						this.clearForm()
					} else {
						this.msgBack = re.msg
						this.clearForm()
					}
				})
			})
		},
		// 清空输入框
		clearForm() {
			this.selected = ''
			this.ipt_address = ''
			this.ipt_beizhu = ''
			this.transpwd = ''
		},
		// ============================================================添加提币地址👆====================================================//
		// ===========================================================获取提币地址👇=====================================================//
		// 获取提币地址
		getAddressInfo() {
			let getData = {
				fuid: sessionStorage.getItem('uid'),
			}
			vpost(vlink.addressManage.getAddressInfo, getData).then(re => {
				if (re.status == 1) {
					this.addressList = re.data.fvirtualaddress
				}
			})
		},
		// ===========================================================获取提币地址👆=====================================================//
	},
	mounted() {
		// 获取币种
		this.e_getCurrency()
		// 获取提币地址
		this.getAddressInfo()
	},
}
</script>

<style scoped>
.property-input {
	background: #181b2a;
	padding-top: 14px;
	padding-bottom: 6px;
	overflow: visible;
	border-radius: 3px;
	margin-top: 34px;
}
.input-content-item {
	width: 100%;
}
.select-input {
	width: 120px !important;
}
input,
.select-input {
	border-radius: 3px;

	font-size: 16px;
	height: 40px;
	width: 86%;
	padding-right: 30px;
	outline: none;
	text-indent: 20px;
	background: #262a42;
	margin-left: 27px;
	border: 1px solid #424d71;
	border-radius: 3px;
}
.input-content {
	display: table;
	width: 100%;
}
.form-grop-bz {
	padding-right: 20px;
	cursor: pointer;
	position: relative;
}
.adress-list {
	background: #1b1e2e;
	margin-top: 20px;
}
.adress-list span {
	padding: 0 20px;
	height: 45px;
	line-height: 45px;
	color: #c7cce6;
	font-weight: 400;
}

/* .bz{
    margin-bottom: 20px;
    font-size: 16px;
} */
.bz label {
	color: #7888c7;
}
.type {
	font-size: 12px;
	line-height: 12px;
	max-width: 100%;
	height: 22px;
	display: block;
	padding: 0 30px;
}
select {
	margin-left: 31px;
	border: 1px solid #424d71;
	background: #262a42;
	border-radius: 3px;
	width: 100px;
	height: 38px;
	color: white;
}
.bz {
	display: inline-block;
}
.from-grop-text,
.from-grop-tb {
	width: 25%;
}
.from-grop-text input,
.from-grop-tb input {
	color: #fff;
}
.btn {
	padding: 36px 30px;
	text-align: right;
}
.adress-list-item {
	background: #181b2a;
	width: 100%;
	padding: 15px 0;
}
.adress-list-item tr {
	width: 100%;
	padding: 0;
	color: #7888c7;
}

.adress-list-item tr td {
	text-align: center;
	line-height: 40px;
}
.t-white {
	color: var(--clr0) !important;
}
</style>
